<template>
  <div class="app-container">
    <div v-show="active === 1">
      <div class="searchform">
        <!-- 查询条件 -->
        <el-form ref="searchForm" :model="search" size="mini" label-width="90px">
          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="questionName" label="问卷名称">
              <el-input v-model="search.questionName" placeholder="问卷名称" clearable />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="userName" label="用户名">
              <el-input v-model="search.userName" placeholder="用户名称" clearable />
            </el-form-item>
          </el-col>
          <div style="text-align:right">
            <el-button type="primary" icon="el-icon-search" @click="searchHandle">查询
            </el-button>
            <el-button icon="el-icon-refresh" @click="resetForm('searchForm')">重置
            </el-button>
          </div>
        </el-form>
      </div>
      <!-- 表单表头信息 -->
      <div class="table">
        <div class="tableHead">
          <div class="tabletitle">问卷收集</div>
        </div>
        <BaseTable ref="table" @chaneg-size="changeSizeHandle" @chaneg-page="changePageHandle">
          <el-table-column type="index" label="序号" min-width="50"/>
          <el-table-column align="center" label="操作" min-width="100">
            <template slot-scope="scope">
              <el-tooltip class="item" content="明细" placement="bottom">
                <el-button type="text" style="font-size: 20px;" icon="el-icon-document" @click="detail(scope.row)"/>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column v-if="false" prop="question_collect_id" label="question_collect_id"/>
          <el-table-column v-if="false" prop="user_id" label="用户ID"/>
          <el-table-column prop="user_name" label="用户名"/>
          <el-table-column :formatter="filterCode" prop="question_type" label="问卷类型" type="9717"/>
          <el-table-column v-if="false" prop="question_id" label="问卷ID" />
          <el-table-column prop="question_name" label="问卷名称" />
          <el-table-column prop="question_context" label="问卷说明" />
        </BaseTable>
      </div>
    </div>
    <!-- 新增div -->
    <!-- 弹框 -->
    <el-dialog :title="clsuseTitle" :visible.sync="dialogFormVisible" :close-on-click-modal="false" width="70%" append-to-body>
      <div class="elform">
        <el-form ref="form" :model="form" :disabled="true" size="mini" label-width="90px">
          <el-row :gutter="4">
            <el-col :xs="24" :sm="24" :md="8">
              <el-form-item prop="userName" label="用户名">
                <el-input v-model="form.userName" placeholder="用户名" clearable />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="8">
              <el-form-item prop="questionName" label="问卷名称">
                <el-input v-model="form.questionName" placeholder="问卷名称" clearable />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="8">
              <el-form-item prop="questionType" label="问卷类型" >
                <r-select v-model="form.questionType" placeholder="问卷类型" type="9717" class="form-input" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="6">
            <el-col :xs="24" :sm="24" :md="22">
              <el-form-item prop="questionContext" label="问卷说明">
                <el-input :rows="2" v-model="form.questionContext" type="textarea" placeholder="问卷说明" clearable />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="elform">
        <el-form v-for="(item,index) in itemList" :key="index" :model="item" disabled>
          <el-row :gutter="6">
            <el-col v-if="false" :xs="24" :sm="24" :md="1">
              <el-form-item prop="item_id" label="题目 ID:">
                <el-input v-model="item.item_id" placeholder="题目ID:" clearable class="form-input"/>
              </el-form-item>
            </el-col>
            <el-col >
              <el-form-item v-if="item.item_type===97021002" prop="item_title" label="单选题:" >
                <el-input v-model="item.item_title" placeholder="题目名称:" clearable class="eInput"/>

              </el-form-item>
              <el-form-item v-if="item.item_type===97021003" prop="item_title" label="多选题:" >
                <el-input v-model="item.item_title" placeholder="题目名称:" clearable class="eInput"/>

              </el-form-item>
              <el-form-item v-if="item.item_type===97021001" prop="item_title" label="简答题:" >
                <el-input v-model="item.item_title" placeholder="题目名称:" clearable class="eInput"/>

              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="6">
            <el-col :xs="24" :sm="24" :md="16">
              <el-form-item prop="option_name" >
                <!-- 判断是单选还是多选还是问答 -->
                <!-- 文本框 -->
                <el-form-item v-if="item.item_type===97021001" label="答案:">
                  <el-input v-model="item.item_result" :rows="3" style="width:500px" type="textarea"/>
                </el-form-item>

                <!-- 单选 -->
                <el-radio-group v-if="item.item_type===97021002" v-model="item.item_result_name">
                  <div v-for="(items,index) in item.option_names" :key="index">
                    <el-row :gutter="6" style="left:110px">
                      <el-col :xs="24" :sm="24" :md="12">
                        <el-form-item>
                          <el-radio :label="items.option_name" />
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </div>
                </el-radio-group>
                <!-- 多选 -->
                <el-checkbox-group v-if="item.item_type===97021003" v-model="item.more_option">
                  <div v-for="(items,index) in item.option_names" :key="index" >
                    <el-row :gutter="6" style="left:110px">
                      <el-col :xs="24" :sm="24" :md="12" >
                        <el-form-item>
                          <el-checkbox :label="items.option_name" />
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </div>
                </el-checkbox-group>

              </el-form-item>
            </el-col>
          </el-row>
          <br>
          <br>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button type="text">
          <i class="el-icon-search magnifier" />
        </el-button>
        <el-button @click="cancel()">取 消</el-button>
      </div>
    </el-dialog>
    <!-- //
    // -->
  </div>
</template>
<script>
import {
  getCollect,
  selectById,
  selectQuestionById
} from '@/api/admin/system_settings/gms/questionnaireCollect'
// import {
//   getUserInfoById
// } from '@/api/admin/org/gms/employeeInfo'
import Pagination from '@/components/Pagination'
import BaseTable from '@/components/BaseTable'
import BaseTableNoPage from '@/components/BaseTable/BaseTableNoPage'
import formMixins from '@/mixins/formMixins'
import rSelect from '@/components/Select/Select'
import filtercode from '@/components/Checkbox/filtercode'
import _ from 'lodash'
export default {
  name: 'QuestionnaireCollect',
  components: {
    BaseTable,
    BaseTableNoPage,
    Pagination,
    rSelect,
    filtercode
  },
  mixins: [formMixins],
  data() {
    return {
      active: 1,
      dialogFormVisible: false,
      editorOption: {},
      bols: true,
      clsuseTitle: '',
      dialogType: '',
      saveBS: '',
      type: 0,
      itemList: [],
      search: {
        limit: 10,
        pageNum: 1,
        userName: '',
        questionName: ''
      },
      dialogVisible: false,
      form: {
        userName: '',
        questionName: '',
        questionType: '',
        userId: '',
        questionCollectId: '',
        questionContext: '',
        itemId: '',
        itemType: '',
        itemTitle: '',
        itemResult: ''
      }

    }
  },
  computed: {},
  watch: {
  },
  mounted() {
    this.searchHandle()
  },
  methods: {
    // 取消弹窗
    cancel() {
      this.dialogFormVisible = false
    },
    // 查询
    searchHandle() {
      const table = this.$refs['table']
      const search = _.extend(this.search)
      table.wait()
      getCollect(search).then(res => {
        console.log(res)
        table.complete().filData(res)
      }).catch(err => {
        table.complete()
      })
    },
    addEvent() { // 新增一条发送时间
      this.formData.ruleList.push({
        ruleString: ''
      })
    },
    // 明细
    async detail(data) {
      this.bols = false
      this.saveBS = false
      this.dialogType = 'detail'
      this.clsuseTitle = '答卷明细'
      // console.log(data)
      // this.form.userName = data.user_name
      // this.form.questionName = data.question_name
      // this.form.questionType = data.question_type
      // this.form.questionContext = data.question_context
      selectQuestionById(data.question_collect_id).then(res => {
        this.form.userName = data.user_name
        this.form.questionName = data.question_name
        this.form.questionType = data.question_type
        this.form.questionContext = data.question_context
      })

      await selectById(data.question_collect_id)
        .then(res => {
          this.itemList = res
        })
      this.dialogFormVisible = true
    }
  }}

</script>

<style scoped>
.content{
  overflow-y: auto;
  overflow-x: auto
}
.editor {
    height: 400px;
    width: 900px;
  }
  .eInput{
    width: 300px;
  }
</style>
